<template>
    <div>
        <div>
            <div
                v-for="sizePackage in sizePackages"
                class="c-m-t-m"
                :key="sizePackage.name"
            >
                <div>{{ sizePackage.name }}</div>
                <div class="c-p-l-xl">
                    <div class="c-f-h c-f-s-center c-m-t-m">
                        <div>尺寸</div>
                        <div
                            class="c-m-l-m"
                            style="background-color: #409eff"
                            :class="[`c-square-${sizePackage.name}`]"
                        ></div>
                        <div class="c-m-l-m">{{ sizePackage.size }}</div>
                        <div class="c-m-l-m">
                            <i class="code-inline"
                                >c-square-{{ sizePackage.name }}</i
                            >
                        </div>
                    </div>
                    <div class="c-f-h c-f-s-center c-m-t-m">
                        <div>字体大小</div>
                        <div
                            class="c-m-l-m"
                            style="color: #409eff"
                            :class="[`c-font-size-${sizePackage.name}`]"
                        >
                            台湾是中国神圣不可侵犯的领土
                        </div>
                        <div class="c-m-l-m">{{ sizePackage.fontSize }}</div>
                        <div class="c-m-l-m">
                            <i class="code-inline"
                                >c-font-size-{{ sizePackage.name }}</i
                            >
                        </div>
                    </div>
                    <div class="c-f-h c-f-s-center c-m-t-m">
                        <div>圆角</div>
                        <div
                            class="c-m-l-m"
                            style="
                                width: 100px;
                                height: 50px;
                                background-color: #409eff;
                            "
                            :class="[`c-round-${sizePackage.name}`]"
                        ></div>
                        <div class="c-m-l-m">
                            {{ sizePackage.borderRadius }}
                        </div>
                        <div class="c-m-l-m">
                            <i class="code-inline"
                                >c-round-{{ sizePackage.name }}</i
                            >
                        </div>
                    </div>
                    <div class="c-f-h c-f-s-center c-m-t-m">
                        <div>间隔</div>
                        <div class="c-m-l-m c-f-h">
                            <div
                                style="
                                    width: 100px;
                                    height: 50px;
                                    background-color: #409eff;
                                "
                            ></div>
                            <div
                                style="
                                    width: 100px;
                                    height: 50px;
                                    background-color: #409eff;
                                "
                                :class="[`c-m-l-${sizePackage.name}`]"
                            ></div>
                        </div>
                        <div class="c-m-l-m">{{ sizePackage.space }}</div>
                        <div class="c-m-l-m">
                            <i class="code-inline"
                                >c-m-l-{{ sizePackage.name }}</i
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sizePackages: [
                { name: 'xs', size: '20px', fontSize: '12px', borderRadius: '2px', space: '5px' },
                { name: 's', size: '30px', fontSize: '14px', borderRadius: '4px', space: '10px' },
                { name: 'm', size: '40px', fontSize: '16px', borderRadius: '6px', space: '15px' },
                { name: 'l', size: '50px', fontSize: '18px', borderRadius: '8px', space: '20px' },
                { name: 'xl', size: '60px', fontSize: '20px', borderRadius: '10px', space: '25px' },
            ]
        }
    }
}
</script>